{# This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/. #}

{% raw %}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>{{ pres.title }}</title>
        <style>
            body {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

            svg {
                display: none;
                filter: blur(0);
            }

            .sozi-frame-list {
                position: absolute;
                top: 0;
                right: 0;
                width: 33%;
                height: 100%;
                margin: 0;
                padding: 0.5em 1em 0.5em 0.25em;
                overflow-y: auto;

                font-family: "Droid Sans", Helvetica, Arial, sans-serif;
                font-size: 12pt;

                color: rgb(240, 255, 255);
                background-color: rgba(34, 34, 34, 0.9);
            }

            .sozi-frame-list ol {
                margin: 0;
                overflow-x: hidden;
            }

            .sozi-frame-list li {
                white-space: nowrap;
            }

            li.sozi-title-level-1:before { content: '. . ';             color: rgb(100, 100, 100); }
            li.sozi-title-level-2:before { content: '. . . . ';         color: rgb(100, 100, 100); }
            li.sozi-title-level-3:before { content: '. . . . . . ';     color: rgb(100, 100, 100); }
            li.sozi-title-level-4:before { content: '. . . . . . . . '; color: rgb(100, 100, 100); }

            .sozi-frame-list a {
                color: inherit;
                text-decoration: none;
            }

            .sozi-frame-list a:hover {
                color: rgb(0, 204, 255);
                text-decoration: underline;
            }

            .sozi-frame-list a.current {
                color: rgb(255, 170, 68);
            }

            .sozi-frame-number {
                position: absolute;
                top: 0;
                left: 1em;
                text-align: center;
                padding: 0.3em 0.6em;

                cursor: pointer;

                font-family: "Droid Sans", Helvetica, Arial, sans-serif;
                font-size: 12pt;
                color: rgb(240, 255, 255);
                background-color: rgba(34, 34, 34, 0.9);
            }

            .sozi-blank-screen {
                background: black;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 100%;
                visibility: visible;
                z-index: 999;
                transition: opacity 0.5s, visibility 0.5s;
            }

            svg a {
                cursor: pointer;
            }

            @keyframes spinner {
                to { transform: rotate(360deg); }
            }

            .spinner:before {
                content: '';
                box-sizing: border-box;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 40px;
                height: 40px;
                margin-top: -20px;
                margin-left: -20px;
                border-radius: 50%;
                border: 4px solid #ccc;
                border-top-color: #333;
                animation: spinner .8s linear infinite;
            }

            {{ customCSS }}
        </style>
    </head>
    <body>
        {{ svg }}
        <div class="sozi-frame-number" title="Click to show the frame list">1</div>
        <div class="sozi-frame-list">
            <ol>
                {% for frame in pres.frames %}
                    {% if frame.showInFrameList %}
                        <li class="sozi-title-level-{{ frame.titleLevel }}" value="{{ loop.index }}"><a href="#{{ frame.frameId }}" title="{{ frame.title }}">{{ frame.title }}</a></li>
                    {% endif %}
                {% endfor %}
            </ol>
        </div>
        <div class="sozi-blank-screen">
            <span class="spinner"></span>
        </div>
        <script>var soziPresentationData = {{ json }};</script>
{% endraw %}
        <script>{{'{% raw %}'}}{{ js|safe }}{{'{% endraw %}'}}</script>
{% raw %}
        <script>
            {{ customJS|safe }}
        </script>
{% endraw %}
    </body>
</html>
